﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SlideGallery.ascx.cs" Inherits="NCS.Module.Multimedia.Web.Gallery.SlideGallery" %>
<script src="/Jscripts/HomePage/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="/Jscripts/HomePage/jquery.scrollShow.js" type="text/javascript"></script>

<script type="text/javascript">
	jQuery(function( $ ){
		//borrowed from jQuery easing plugin
		//http://gsgd.co.uk/sandbox/jquery.easing.php
		$.easing.backout = function(x, t, b, c, d){
			var s=1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		};
		
		$('#screen').scrollShow({
			view:'#view',
			content:'#images',
			easing:'backout',
			wrappers:'link,crop',
			navigators:'a[id]',
			navigationMode:'sr',
			circular:true,
			start:0
		});
	 });
</script>

<style type="text/css">
#screen{
    /* begin modify phongla 2012_08_08 */
    /* code cu 
    width:906px; */
    width: 600px;
    /* end modify phongla 2012_08_08 */
    padding:0;
    height:66px;
}			
#screen div{
    float:left;
    list-style:none;
	margin-left:7px;
	margin-right: 7px;
}
#screen .jq-ss-crop{
	margin:0px;
    float:left;				
}
#screen .jq-ss-link{
	margin:0px;
    float:left;				
}
#left,#right{
    font-weight:bolder;
    font-size:36px;
    display:block;
    text-decoration:none;
}
#view{
    margin:0px;
    /* begin modify phongla 2012_08_08 */
    /* code cu 
    width:815px; */
    /* thay the bang */
    width: 538px;
    /* end modify phongla 2012_08_08 */
    height:66px;
    border:0px;
    overflow:hidden;
    background-image:url(/images/HomePage/bg_arow.jpg);
}
#images{
    width:3818px !important;
    width:3822px;
    padding:0px;
    margin:0px;
    list-style:none;
}
#images li{
    list-style:none;
    float:left;
}

#images li img {
    height:60px;
    width:96px;
    border:solid 2px #D9D9D9;
    padding:1px;
}
.frame_gallery img{
    width:96px;
    height:60px;
    border: 0;
}
.gallery_text {
    font-family:tahoma;
    font-size:12px;
}

/* ----- tool tip specific styles ----- */

.tooltiptext {
    color:gray;
    font-family:tahoma;
    font-size:11px;
    font-weight:normal;
    line-height:18px;
    text-decoration:none;
}

#theToolTip{
position: absolute;
left: -300px;
width: 250px;
border: 2px solid #C0C09F;
padding: 6px 0px 0px 10px;
background-color: #FFFFCC;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=4);
}

#ToolTipPointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

#theToolTip p{
font-size: 1.1em;
color: #333333;
line-height:1.4em;
margin-right:10px;
margin-top:0;
}

#ToolTipTextWrap {
color: #592C16;
margin-right:10px;
font-weight:bold;
font-size: 12px;
}

#left img, #right img{
border:none;
}


</style>
<div class="bg_tinanh">
    <div class="text_tinanh">
        <asp:HyperLink runat="server" ID="link_album_category"></asp:HyperLink>
    </div>
    <div class="scroll" id="screen">
        <div class="button_left">
            <a id="left" href="#">            
            <img alt="previous" src="/Images/HomePage/NewStyle/left.gif" />
            </a>
        </div>
        <!--begin danh sach tin anh-->
        <div id="view">
        <asp:Repeater runat="server" ID="rpt1">
            <HeaderTemplate>
                <ul id="images" class="box_im">
            </HeaderTemplate>
            <ItemTemplate>
                <li class="im1">
                    <asp:Image CssClass="addToolTip" runat="server" ID="img_img"/>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>
        </div>
        <!--end danh sach tin anh-->
        <div class="button_right">
            <a id="right" href="#">
            <img alt="next" src="/Images/HomePage/NewStyle/right.gif" />
            </a>
        </div>
        <div style="clear: both">
        </div>
    </div>
    <div style="clear: both">
    </div>
</div>         
